<template>
	<view class="main">
		<map
			id="myMap"
			class="map"
			:latitude="posLatitude"
			:longitude="posLongitude"
			:markers="covers"
			:scale="scale"
			:enable-satellite="mapType != 1"
			@markertap="markertap"
			@regionchange="bindRegionChange"
		></map>
		<view class="mapSwitch">
			<view v-if="mapType == 1" class="item" @click="switchMap(2)">卫星图</view>
			<view v-if="mapType == 2" class="item" @click="switchMap(1)">标准图</view>
		</view>
	</view>
</template>

<script setup>
	 import {
		onShow,
	    onReady
	} from '@dcloudio/uni-app';
	import {
		ref,
		nextTick,
		onMounted,
		getCurrentInstance
	} from 'vue'

	const {
		instance,
		proxy
	} = getCurrentInstance();
	let posLatitude = ref(30.33); // 经度
	let posLongitude = ref(120.18); // 纬度
	let mapType = ref(1); // 地图类型 1、普通  2、卫星图
	let scale = ref(12); // 缩放
	let covers = ref([]); // 标点
	
	const bindRegionChange = async (e) => { // 拖拽地图
		if (e.detail.type != "end") return;
		const { longitude, latitude } = e.detail.centerLocation;
		scale.value = Number(e.detail.scale);
		posLatitude.value = Number(latitude);
		posLongitude.value = Number(longitude);
		getMapCovers(longitude, latitude);
	}
	
	const getMapCovers = async (longitude, latitude) => { // 获取地图标点
		const res = await proxy.$http("api/spot/getSpotList", {
			type: 3,
			longitude,
			latitude,
			range: 10,
			page: 1,
			size: 3000
		}, "GET");
		if (res.result.data.length == 0) return;
		covers.value = res.result.data.map(todo => {
			return {
				id: todo.id,
				// title: todo.title,
				latitude: Number(todo.latitude),
				longitude: Number(todo.longitude),
				iconPath: '../../static/mapPosition.png',
				width: 40,
				height: 40
			}
		})
		// 	let map = uni.createMapContext("myMap");
		// 	console.log(covers.value.length);
		// 	map.moveToLocation({
		// 		longitude,
		// 		latitude,
		// 		success(data) {
		// 		},
		// 		complete(e) {
		// 		}
		// 	})
	}
	
	const markertap = (e) => { // 点击标点
		const point =  covers.value.find(todo => {
			return e.detail.markerId == todo.id;
		})
		console.warn(point);
		uni.navigateTo({
			url: `/pages/detail/index?id=${e.detail.markerId}`
		})
	}
	
	const getPosition = () => { // 获取自身定位
		uni.getLocation({
			type: 'gcj02',
			complete: function(res) {
				console.log(res);
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				posLatitude.value = Number(res.latitude);
				posLongitude.value = Number(res.longitude);
				getMapCovers(res.longitude, res.latitude);
			}
		});
	}

	const switchMap = (index) => { // 切换地图
		console.log("切换", index)
		mapType.value = index;
	}

	onShow(() => {
		getPosition();
	})
</script>

<style lang="scss" scoped>
.map{
	width: 100vw;
	height: 100vh;
}
.mapSwitch{
	width: 88rpx;
	height: 120rpx;
	border-radius: 16rpx;
	background: #fff;
	box-sizing: border-box;
	padding: 16rpx 0 0;
	position: fixed;
	right: 32rpx;
	bottom: 80rpx;
	text-align: center;
	.item{
		color: #000;
		font-size: 20rpx;
		line-height: 20rpx;
	}
	.item:before{
		content: "";
		display: block;
		width: 64rpx;
		height: 64rpx;
		margin-bottom: 8rpx;
		background: url(https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/goFishing/mapIcon.png);
		background-size: 100% 100%;
		margin: 0 auto 4rpx;
	}
	.item:nth-of-type(2):before{
		background: url(https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/goFishing/mapIcon2.png);
		background-size: 100% 100%;
	}
}
</style>

